<template>
  <!-- html -->
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<!-- <script lang="ts">
//JS 或 TS
export default {
  name: "Person234",
};
</script> -->

<script lang="ts" setup name="Person234">
// console.log("setup");   执行顺序在beforeCreate()之前
// console.log(this); //setup函数中的this是undefined,Vue3中已经弱化了this
//数据,原来写在data中的，此时的name,age,tel都不是响应式的数据
let name = "zs";
let age = "18";
let tel = "155893";
//方法
function changeName() {
  name = "张三"; //这样修改页面中的name没有变化 ，不是响应式的
}
function changeAge() {
  age += 1;
}
function showTel() {
  alert(tel);
}
//返回对象
// return { name, age, changeName, changeAge, showTel };
//setup返回值也可以是一个渲染函数
//return () => "呵呵";
</script>

<style scoped>
/* 样式 */
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
